import React from "react";
import {log} from "../../../utils/commonfunc";
import {withRouter} from 'react-router-dom'
import LocalStorageService from "../../../utils/LocalStorageService";
import {bindScrollEvent, pushWithSearch, searchParams} from "../mall";
import {getMallRecordReq, getUserDetailReq} from "../../../apis/goApis";
import GoBackLayout from "../../../layouts/GoBackLayout/GoBackLayout";
import {checkAndGoBack} from "../../best-line-up/best-line-up";
import earPodSrc from "../../../res/images/web/mall/help备份@2x.png"
import TabWithCustomUnderline from "../../../layouts/TabWithCustomUnderline/TabWithCustomUnderline";
import beanSrc from '../../../res/images/web/mall/应豆-金1@2x.png'
import moment from "moment";
import emptySrc from '../../../res/images/web/mall/wushuju@2x.png'
import CustomButton from "../../../shared-components/CustomButton/CustomBotton";
import yuan10 from "../../../res/images/web/mall/小话费-10@2x.png"
import yuan50 from "../../../res/images/web/mall/小话费-50@2x.png"
import yuan100 from "../../../res/images/web/mall/小话费-100@2x.png"

class MallRecord extends React.Component {

    constructor(props) {
        super(props)
        this.uid = LocalStorageService.get('userid')
        this.searchParams = searchParams()
        this.state = {
            type: -1,
            p: 0,
            list: [],
            init: true,
        }
        this.tabs = [
            {title: '全部',},
            {title: '待发货',},
            {title: '已完成',},
        ]
    }

    componentDidMount() {
        this.all()
    }

    all = () => {
        const params = {
            uid: this.uid,
            p: this.state.p,
            settle: this.state.type,
        }
        const search = this.searchParams
        if (search.uid) {
            params.uid = search.uid
        }
        getMallRecordReq(params)
            .then(res => {
                const list = res.data.ok
                if (list) {
                    log(list)
                    this.setState({
                        list: [...this.state.list, ...list,],
                        init: false,
                    })
                }
            })
    }

    next = () => {
        this.setState({
            p: this.state.p + 1,
        }, () => this.all())
    }

    onTabChange = (tab, index) => {
        this.setState({
            p: 0,
            list: [],
            type: index - 1,
            init: true,
        }, () => this.all())
    }

    render() {
        const list = this.state.list
        const listTemplate = <div className='mall-record-list-container'
                                  onScroll={() => bindScrollEvent(this.scrollContainer, this.next)}
                                  ref={el => this.scrollContainer = el}
        >
            {list.map((record, index) => {
                // Cost: 100
                // Createt: 1615540562
                // Dealno: "20210312171602.13"
                // Detail: "{"phone":"18859900398"}"
                // Express: ""
                // Num: 1
                // Settle: 0
                // Settlet: 0
                // Title: "100元话费"
                // Uid: "ccb54c7d-5503-4086-986c-2a97e1083b2f"
                log(record.Settle)
                const settle = record.Settle
                let settleText
                let settleCls = 'mall-record-item-record-status'
                if (settle === 0) {
                    settleText = '待发货'
                    settleCls += ' mall-record-item-record-unsettled'
                } else if (settle === 1) {
                    settleText = '已完成'
                    settleCls += ' mall-record-item-record-settled'
                }

                return <div key={index} className='mall-record-item fade-in-slide-top'>
                    <p className='gray-text mg-b-12px'>
                        {moment(new Date(record.Createt * 1000)).format('下单时间：YYYY-MM-DD HH:mm:ss')}
                    </p>
                    {record.Express && <p className='gray-text mg-b-12px'>快递单号：{record.Express}</p>}
                    <div className='flex'>
                        <div
                            className='mall-record-item-image'
                            style={{background: `no-repeat url(${record.Img}) center/cover`}}
                        />
                        <div className='flex-1 flex-space-between'>
                            <div>
                                <p>{record.Title}</p>
                                <p className={settleCls}>{settleText}</p>
                            </div>
                            <p>× {record.Num}</p>
                        </div>

                    </div>
                    <div className='flex-align-center flex-end' style={{width: '100%',}}>
                        <p className='mall-record-item-num'>
                            共{record.Num}
                        </p>
                        <img alt='' src={beanSrc} style={{width: 12, height: 12, marginRight: 4,}}/>
                        <p className='mall-record-item-cost'>
                            {record.Cost}
                        </p>
                    </div>
                </div>
            })}
        </div>
        const emptyTemplate = <div className='text-align-center'>
            <img src={emptySrc} alt='' style={{width: '102px', height: '66px', marginTop: '30%', marginBottom: 10,}}/>
            <p className='gray-text mg-b-12px'>你还没有兑换</p>
            <div style={{width: 168, margin: '0 auto',}}>
                <CustomButton
                    bg='#FFA500'
                    color='#fff'
                    onClick={() => pushWithSearch(this.props.history, './mall')}
                >
                    去兑换
                </CustomButton>
            </div>
        </div>

        return <GoBackLayout
            onLeftClick={() => checkAndGoBack(this.props.history, './mall')}
            mainTitle='兑换记录'
            rightContent={<img src={earPodSrc} style={{width: 24, height: 24,}} alt=''/>}
        >

            <TabWithCustomUnderline
                tabs={this.tabs}
                animated={true}
                destroyInactiveTab={true}
                onChange={this.onTabChange}
                tabBarUnderlineStyle={{
                    width: '40%',
                    borderRadius: '0',
                    background: '#36C8B9',
                }}
            />
            {(list.length === 0 && this.state.init === false) ? emptyTemplate : listTemplate}
        </GoBackLayout>
    }

}

export default withRouter(MallRecord)